<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
			#box{
				width: 350px;
				height: 350px;
				box-shadow: 2px 2px 10px gray;
				margin: 20px 30px;
				position: relative;
				
				
			}
			#box img{
				width: 100%;
				height: 100%;
			

			}
			#mark{
				height: 175px;
				width: 175px;
				position: absolute;
				top:0px;
				left: 0px;
				background: #FEDE4F;
				opacity: 0.5;
				cursor: move;
				
			}
			#bigBox{
				height: 350px;
				width: 350px;
				left: 380px;
				top: 0px;
				overflow: hidden;
				display: block;
				position: absolute;
			}
			#bigBox img{
				position: absolute;
				top: 0;
				left: 0;
				width: 200%;
				height: 200%;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="img/iphone.jpg"/>
			<div id="mark" style="display: none"></div>
			
		</div>
		<div id="bigBox">
			<img src="img/iphone_big.jpg"/>
		</div>
		
		<script src="js/utils.js"></script>
		<script>
		window.onload=function(){
			var box=document.getElementById("box");
			var mark=document.getElementById("mark");
			var bigBox=document.getElementById("bigBox");
			var tempLeft=0,tempTop=0;
			var bigImg=bigBox.getElementsByTagName("img")[0];
			function setPosition(e){
				var left=e.clientX-box.offsetLeft-(mark.offsetWidth/2);
				var top=e.clientY-box.offsetTop-(mark.offsetHeight/2);
				var minLeft=0,minTop=0,maxLeft=box.offsetWidth-mark.offsetWidth,maxTop=box.offsetHeight-mark.offsetHeight;
				
				if(left<=0){
					mark.style.left=0;
					tempLeft=0;
				}else if(left>=maxLeft){
					mark.style.left=maxLeft+"px";
					tempLeft=maxLeft;
				}else{
					mark.style.left=left+"px";
					tempLeft=left;
				}
				if(top<=0){
					mark.style.top=0;
					tempTop=0;
				}else if(top>=maxTop){
					mark.style.top=maxTop+"px";
					tempTop=maxTop;
				}else{
					mark.style.top=top+"px";
					tempTop=top;
				}
				
				bigImg.style.left=-tempLeft*2+"px";
				bigImg.style.top=-tempTop*2+"px";
				
			}
			box.onmouseenter=function(e){
				e=e||window.event;
				mark.style.display="block";
				bigBox.style.display="block";
				setPosition(e);
				
				
			};
			box.onmousemove=function(e){
				e=e||window.event;
				setPosition(e);
				
				
			};
			box.onmouseleave=function(e){
				e=e||window.event;
				mark.style.display="none";
				bigBox.style.display="none";
				setPosition(e);
				
			};
		};
			
		</script>
	</body>
</html>
